<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>如此简单</title>
<link rel="stylesheet" href="css/jquery.fullPage.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<style>
.section1 {background: url(images/1.jpg);}
.section2 {background: url(images/2.jpg);}
.section3 {background: url(images/3.jpg);}
.section4 {background: url(images/4.jpg);}
.section5 {background: url(images/5.jpg);}
.section6 {background: url(images/6.jpg);}
.section7 {background: url(images/7.jpg);}
.section8 {background: url(images/8.jpg);}

body{margin: 0 auto;padding: 0;}
.section { text-align: left; 
	       font-family: "pingfang SC","Lantinghei SC", "Microsoft Yahei", '微软雅黑', "SimSun""pingfang SC","Lantinghei SC", "Microsoft Yahei", '微软雅黑', "SimSun"; 
	       font-weight: 100
	       color: #fff; 
	       background-repeat: no-repeat;
	       -moz-background-size:100% 100%;
	       background-size:100% 100%;}
h1{font-size:2.46rem;
   font-weight: 100;
   color: #fff;
   }
h2{font-size: 1.8rem;
	font-weight: 200;
	color: #333;
    }
.section1 p { color: #fff; }
.section2 p { position: relative; 
	          left: -120%;
	          color: #666;
	          margin-top: -0.7em;
              width: 18em;
	          }

.section3 p { position: relative;
	          color: #666;
              bottom: -120%;
              margin-top: -0.7em;
              width: 18em;
              }

.section4 p { display: none;
	          color: #666;
	          margin-top: -0.7em;
              width: 18em;
	          }
.section1_body {
	          margin-left: 2.2rem;
	          margin-top: -5rem;
	          }
.section2_body {
	          margin-left: 2.8rem;
	          margin-top: -19rem;
	          }
.section1 p { position: relative; 
	          font-size: 1.2rem;
	          font-weight: 80;
	          margin-top: -1.4rem;
	          }
.down_btn_1{text-align: right;
            margin-top:22rem;}
</style>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery.fullPage.min.js"></script>
<script src="http://cdn.staticfile.org/jquery-easing/1.3/jquery.easing.min.js"></script>
<script>
$(function(){
	$('#dowebok').fullpage({
		sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'],
		afterLoad: function(anchorLink, index){
			if(index == 2){
				$('.section2').find('p').delay(500).animate({
					left: '0'
				}, 1500, 'easeOutExpo');
			}
			if(index == 3){
				$('.section3').find('p').delay(500).animate({
					bottom: '0'
				}, 1500, 'easeOutExpo');
			}
			if(index == 4){
				$('.section4').find('p').fadeIn(2000);
			}
		},
		onLeave: function(index, direction){
			if(index == '2'){
				$('.section2').find('p').delay(500).animate({
					left: '-120%'
				}, 1500, 'easeOutExpo');
			}
			if(index == '3'){
				$('.section3').find('p').delay(500).animate({
					bottom: '-120%'
				}, 1500, 'easeOutExpo');
			}
			if(index == '4'){
				$('.section4').find('p').fadeOut(2000);
			}
		}
	});
});
</script>
</head>

<body>

<div id="dowebok">
	<div class="section section1">
		<div class="section1_body">
		      <h1>如此简单App</h1>
		      <p>智能时间管理工具</p>
		      <div>
		      	<a href="www.guixue.com"><img src="images/btn_down_1.png" width="100px" height="30px"></a>
		      </div>
		      <div class="down_btn_1">
		      	<img src="images/btn_video_1.png" width="98px" height="30px">
		      </div>
		</div>
	</div>
	<div class="section section2">
		<div class="section2_body">
		<h2>自然语言识别</h2>
		<p>「明天下午3点开会」用户可以像和秘书说话一样和如此简单沟通。</p>
		</div>
	</div>
	<div class="section section3">
		<div class="section2_body">
		<h2>推荐算法</h2>
		<p>「下周三去民政局登记结婚」如此简单就会推荐当天的交通路线，提醒带齐办理所需要的证件材料。</p>
		</div>
	</div>
	<div class="section section4">
		<div class="section2_body">
		<h2>人工智能</h2>
		<p>[下周一是媳妇儿的生日，记得买礼物]如此简单能分析你的习惯，了解你的偏好，帮助你恰当地处理事项。</p>
		</div>
	</div>
	<div class="section section5">
		<div class="section5_body">
		<h2>规划管理每一件重要事项</h2>
		<p>通过智能算法，帮助你管理事项；在任务进行的关键节点发出提醒，不错过任何一件待办事项；让你轻松安排日常任务。</p>
		</div>
	</div>
	<div class="section section6">
		<h2>培养好习惯</h2>
		<p>好的习惯让我们变得更有效率，更有知识，更有能力</p>
	</div>
	<div class="section section7">
		<h2>更换主题</h2>
		<p>一种画面，一种心情</p>
	</div>
	<div class="section section8">
		<h2>如此简单</h2>
		<p>提高效率  简单生活</p>
	</div>
</div>

</body>
</html>